<div class="row databases-component">
  <panel>
    <div class="title">{{ server }} Databases</div>
    <table class="table table-hover">
      <thead>
        <th>name</th>
        <th>collections</th>
        <th>size</th>
      </thead>
      <tbody>
        <tr *ngFor="let database of databases">
          <td><a routerLink="/servers/{{ server }}/databases/{{ database.name }}/collections">{{ database.name }}</a></td>
          <td>
            <span class="dotted"
                  [ngbPopover]="popCollection"
                  placement="auto right"
                  triggers="manual"
                  #p1="ngbPopover"
                  (mouseenter)="toggleCollection(p1, database.collections)"
                  (mouseleave)="toggle(p1)"
            >{{ database.collections.length }}</span>
          </td>
          <td>
            <span class="dotted"
                  [ngbPopover]="popStats"
                  placement="auto right"
                  triggers="manual"
                  #p2="ngbPopover"
                  (mouseenter)="toggleStats(p2, database)"
                  (mouseleave)="toggle(p2)"
            >{{ database.size | bytes }}</span>
          </td>
        </tr>
        <tr *ngIf="databases.length == 0 && !loading">
          <td colspan="3">
            <div class="center">No databases...</div>
          </td>
        </tr>
        <tr *ngIf="loading">
          <td colspan="3">
            <div class="center">Loading...</div>
          </td>
        </tr>
      </tbody>
    </table>
  </panel>

  <ng-template #popCollection let-collection="collection" let-clipped="clipped">
    <table class="sm">
      <thead>
        <th>Collections</th>
        <th>Size</th>
      </thead>
      <tbody>
        <tr *ngFor="let item of collection">
          <td>{{ item.name }}</td>
          <td>{{ item.size | bytes }}</td>
        </tr>
        <tr *ngIf="clipped">
          <td colspan=2>{{ clipped }} more items...</td>
        </tr>
      </tbody>
    </table>
  </ng-template>

  <ng-template #popStats let-stats="stats">
    <table class="sm">
      <tbody>
        <tr>
          <td>Average obj. size</td>
          <td>{{ stats.avgObjSize | bytes }}</td>
        </tr>
        <tr>
          <td>Data size</td>
          <td>{{ stats.dataSize | bytes }}</td>
        </tr>
        <tr>
          <td>Storage size</td>
          <td>{{ stats.storageSize | bytes }}</td>
        </tr>
        <tr>
          <td>Index size</td>
          <td>{{ stats.totalIndexSize | bytes }}</td>
        </tr>
      </tbody>
    </table>
  </ng-template>
</div>
